<template>
  <div class="business-not-found">
    <default-graph
      v-if="info"
      :title="info.title"
      :show-button="!!info.buttonText"
      :button-text="info.buttonText"
      @on-click-button="router.push(info.buttonPath || '/')"
    >
      <img :src="info.img" :alt="info.title" />
    </default-graph>
    <div v-else class="error">参数错误</div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import { notFoundCodeMap } from './config'

  const route = useRoute()
  const router = useRouter()

  const code = route.query.code as string

  const info = computed(() => {
    return notFoundCodeMap[code]
  })
</script>

<style lang="less" scoped>
  .business-not-found {
    width: 100%;
    height: 100%;

    h4 {
      font-size: 18px;
      text-align: center;
      color: @text02;
      font-weight: 400;
    }

    .error {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 34px;
    }
  }
</style>
